import { visitorEvents } from "@/services"
import { getUrlParams } from "@/util"
import { PageContainer } from "@ant-design/pro-components"
import { useRequest } from "ahooks"
import { Collapse, Form, Spin, Tag, Typography } from "antd"
import dayjs from "dayjs"
import React, { useEffect, useMemo } from "react"

export default function () {
  const userKey = useMemo(() => getUrlParams("user"), [])
  const {
    runAsync: runGetDetail,
    data,
    loading,
  } = useRequest(() => visitorEvents({ id: userKey, pageSize: 9999 }), {
    manual: true,
  })
  useEffect(() => {
    runGetDetail()
  }, [])
  return (
    <PageContainer title={"浏览详情"} subTitle={"VisitorEvents"}>
      <Spin spinning={loading}>
        <Collapse
          items={data?.data?.data?.map(
            (
              { t, event, url, referer, userAgent, ...item }: any,
              index: number,
            ) => {
              return {
                label: (
                  <div className="flex items-center">
                    <div style={{ minWidth: 80 }}>
                      <Tag color={"blue"}>{event}</Tag>
                    </div>
                    {dayjs(t).format("YYYY-MM-DD HH:mm:ss")}
                  </div>
                ),
                children: (
                  <div className="flex flex-col">
                    <Form layout="inline">
                      <Form.Item label={"来源"}>
                        <Typography.Paragraph
                          style={{ margin: 0 }}
                          ellipsis={{ rows: 2, tooltip: referer }}
                        >
                          {referer ? <a href={referer}>{referer}</a> : "无"}
                        </Typography.Paragraph>
                      </Form.Item>
                      <Form.Item label={"地址"}>
                        <Typography.Paragraph
                          style={{ margin: 0 }}
                          ellipsis={{ rows: 2, tooltip: url }}
                        >
                          <a href={url} target={"_blank"}>
                            {url}
                          </a>
                        </Typography.Paragraph>
                      </Form.Item>
                      <Form.Item label={"设备"}>
                        <Typography.Paragraph
                          style={{ margin: 0 }}
                          ellipsis={{ rows: 2, tooltip: userAgent }}
                        >
                          {userAgent}
                        </Typography.Paragraph>
                      </Form.Item>
                    </Form>
                    <Typography.Paragraph>
                      <pre>{JSON.stringify(item, null, 2)}</pre>
                    </Typography.Paragraph>
                  </div>
                ),
              }
            },
          )}
        />
      </Spin>
    </PageContainer>
  )
}
